<template>
  <view class="searchResult">
    <z-paging ref="paging" v-model="dataList" :auto="false" @query="queryList">
      <view slot="top" style="padding: 20rpx 30rpx;box-sizing: border-box;">
        <uv-search placeholder="请输入搜索内容" v-model="params.keyword" @search="handleSearch"
          :showAction="false" @clear="handleClear"></uv-search>
      </view>
      <view class="recommend-menu">
        <view class="recommend-list" v-for="(item, index) in dataList" :key="index" @click="toGoodsDetail(item)">
          <image class="img" :src="item.image" mode=""></image>
          <view class="info">
            <view class="title text-ellipsis">
              {{item.store_name}}
            </view>
            <view class="label">
              <text class="txt" v-for="(item, index) in item.labels">{{item}}</text>
            </view>
            <view class="footer">
              <view class="footer-item">
                <view class="unit">单位</view>
                <view class="valResult">{{item.unit_name}}</view>
              </view>
              <view class="footer-item">
                <view class="unit">库存</view>
                <view class="valResult">{{item.stock}}</view>
              </view>
              <view class="footer-item">
                <view class="unit">采购价</view>
                <view class="valResult">￥{{item.price}}</view>
              </view>
              <view class="footer-item">
                <view class="unit">批量售价</view>
                <view class="valResult">￥{{item.ot_price}}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<script>
  import reqApi from "../../api/api.js";
  export default {
    data() {
      return {
        params: {
          keyword: "",
          page: 1,
          limit: 10
        },
        dataList: []
      }
    },
    onLoad(option) {
      console.log("搜索页面传参", decodeURIComponent(option.keyword));
      this.params.keyword = decodeURIComponent(option.keyword);
      this.$nextTick(() => {
        this.$refs.paging.reload();
      })
    },
    methods: {
      queryList() {
        // 此处请求仅为演示，请替换为自己项目中的请求
        reqApi.searchGoods(this.params).then(res => {
          console.log("返回的结果", res);
          // 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
          this.$refs.paging.complete(res.data.list);
        })
      },
      handleClear(){
        this.$refs.paging.reload();
      },
      handleSearch() {
         this.$refs.paging.reload();
      },
      toGoodsDetail(item) {
        uni.navigateTo({
          url: `/pages/home/goodDetail?id=${item.product_id}`
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .searchResult {
    width: 100vw;
    height: 100vh;
    background: #fff;
    .recommend-menu {
      padding: 0 30rpx;
      box-sizing: border-box;
      .recommend-list {
        display: flex;
        justify-content: space-between;
        padding: 30rpx 0;
        box-sizing: border-box;
        border-bottom: 2rpx solid #eee;

        .img {
          width: 180rpx;
          height: 180rpx;
          margin-right: 18rpx;
        }

        .info {
          flex: 1;

          .title {
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 32rpx;
            color: #222222;
          }

          .label {
            margin: 12rpx 0 16rpx 0;
            display: flex;
            flex-wrap: wrap;
            height: 48rpx;
            .txt {
              font-family: PingFang SC, PingFang SC;
              font-weight: 400;
              font-size: 24rpx;
              color: #EEA800;
              border-radius: 8rpx;
              border: 2rpx solid #EEA800;
              padding: 4rpx 8rpx;
              box-sizing: border-box;
            }
          }

          .footer {
            display: flex;

            .footer-item:first-child {
              padding-left: 0 !important;
            }

            .footer-item:last-child {
              padding-right: 0 !important;
              border-right: 0;
            }

            .footer-item {
              padding: 0 28rpx;
              box-sizing: border-box;
              display: flex;
              flex-direction: column;
              align-items: center;
              border-right: 2rpx solid #eee;
              line-height: 30rpx;
              .unit {
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #999999;
              }

              .valResult {
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #222222;
              }
            }
          }
        }

      }
    }
  }
</style>